<template>
	<view class="content">
		<my-home class="home-float" v-if="floatData.open == 1" :floatData="floatData" :floatX="floatX" :floatY="floatY" :floatFrom="21"></my-home>
		<common-picker @confirm="handleConfirm"></common-picker>
		<view class="loading" v-if="loadingShow">
			<u-loading mode="circle" size="46"></u-loading><text class="loading-text">加载中...</text>
		</view>
		<!--list-->
		<!-- <view class="list">
			<view class="list-item" v-for="(item,i) in list" :key="i" >
				<view>{{item.time}}</view>

				<view :style="{color:'#0DA297'}"><text>充值 ¥</text><text class="money">{{item.money/100}}</text></view>
			</view>
		</view> -->
		<view class="list">
			<view class="list-item" v-for="(item,i) in list" :key="i" >
				<view class="list-item-top">
					<view class="list-item-top-left">{{item.member+'（'+item.paytype + '）'}}</view>
					<view class="list-item-top-right" ><text :style="{color:'#0DA297'}"> ¥</text><text class="money">{{item.money/100}}</text></view>	
				</view>
				<view class="list-item-bottom">
					<view class="list-item-bottom-left">{{item.time}}</view>
					<view class="list-item-bottom-right"><text class="list-item-bottom-recharge">{{item.refund_money}}</text><text  class="list-item-bottom-time">{{item.member_name}}</text></view>
				</view>
				
			</view>
							
				
		</view>
		<!--loadmore-->
		<view class="loadmore" v-if="loadmoreShow">
			<u-loadmore :status="loadmoreStatus" icon-type="flower" />
		</view>
		<!--no-data-->
		<no-data :src="noDataSrc" :txt="noDataTxt" v-if="list && list.length==0"></no-data>
		<uv-back :scroll="scrollTop"></uv-back>
		<view class="bottom-safe-area"></view>

		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//list
				pickerTime:'',//currently selected time
				list: '',
				page:1,//当前页码，默认1
				pageSize:20,
				total:0,//总条数
				loadmoreStatus:'loading',//上拉分页底部提示组件
				loadmoreShow:false,
				//no-data
				noDataSrc:this.$noData,
				noDataTxt:'暂无充值记录',
				//back to the top
				scrollTop:0,
				floatData:{} ,
				floatX:300,
				floatY:80,
				clientHeight:null,
				//loading
				loadingShow:false,
			}
		},
		//back to the top
		onPageScroll(e){
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getListRequest();
			this.getClineHeight();
		},
		
		onReachBottom(){
			if(this.loadmoreShow){return false;}
			
			this.loadmoreShow=true;
			
			if(this.page<Math.ceil(this.total/this.pageSize)){
				this.loadmoreStatus='loading';
				this.page++;
				this.getListRequest();
			}else{
				//no more
				this.loadmoreStatus='nomore';
				this.loadmoreShow=true;
			}
		},
		methods: {
			getBarHeight(){
			        const res = uni.getSystemInfoSync()
			        if(res.platform==='ios'){
			            return 44+res.statusBarHeight
			        }else if(res.platform==='android'){
			            return 48+res.statusBarHeight
			        }else{
			            return 0;
			        }
			    },
			    //获取可视区域高度
			    getClineHeight(){
			        const res = uni.getSystemInfo({
			            success:(res=>{
			                this.clientHeight = res.windowHeight-uni.upx2px(80)-this.getBarHeight();
							this.floatY =  this.clientHeight - 50;
			            })
			        });
			    },
			_reset(){
				this.page=1;//reset页码
				this.loadmoreShow=false;
				this.loadmoreStatus='loading';
				this.total=0;
				this.list='';
			},
			handleConfirm(param){
				this._reset();
				this.pickerTime=param.date;
				this.getListRequest();
			},
			getListRequest(){
				this.loadingShow = true;
				const arr = this.page == 1 ? [] : this.list;
				//getRechargeRecord
				this.$u.api.getRechargeRecord({
					
					time:this.pickerTime,
					page_index:this.page,
				}).then(res=>{
					this.loadingShow = false;
						this.floatData = res.window;
					if(res.result=='success'){
						const list = [...arr,...res.list];
						this.list=list;
						this.total=res.total;		
					}else{
						this.$utils.modal({
							content:res.msg,
							showCancel:false,
							callback:(bool)=>{
					
							}
						});
					};
					this.loadmoreShow=false;
				}).catch(()=>{
					this.loadmoreShow=false;
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top:100rpx;
	}
	.home-float {
		position: fixed;
		z-index: 99;
		bottom: 100rpx;
		right: 50rpx;
	}
	.loading {
		position: fixed;
		top: 48%;
		left: 48%;
	} 
	.loading-text {
		margin-left: 5rpx;
	}
	/* .list{
		padding:0 30rpx;
		background:#fff;
		margin-top: 20rpx;
	} */
	.list-item{
		overflow: hidden;
		margin:15rpx auto;
		width: 90%;
		background: #FFFFFF;
		opacity: 1;
		border-radius:15rpx ;
		border-bottom:2rpx solid #e5e5e5;
	}
	.list-item>view:nth-child(1){
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}
	.list-item>view:nth-child(2){
		font-size: 30rpx;
		font-weight: 500;
	}
	.list .money{
		font-size: 36rpx;
		padding-left: 10rpx;
	}
	.list-item:last-child{
		border-bottom: none;
	}
	.loadmore{
		padding:30rpx 0;
	}
	.list-item-top {
		display: flex;
		justify-content: space-between;
		align-items: center; 
	}
	.list-item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center; 
	}
	.list-item-top-left {
		margin: 32rpx 0 0 28rpx;
		font-size: 30rpx;
	    color: #0DA297;
	}
	.list-item-top-right {
		margin: 26rpx 32rpx 0 0;
	}
	.list-item-top-right .money {
		font-size: 44rpx;
		color: #0DA297;
	} 
	.list-item-bottom-left {
		margin: 8rpx 0 30rpx 28rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.list-item-bottom-right {
		margin: 8rpx 28rpx  28rpx 0;
	}
	.list-item-bottom-recharge {
		font-size: 28rpx;
		font-weight: 500;
		color: #FF6B00;
	}
	.list-item-bottom-time {
		margin-left: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}
</style>
<style>
	page{
		background: #F9F9F9;
	}
</style>
